import React, { useState, useCallback } from 'react';
import { Button, Form, Row, Col, Input } from 'antd';
import { UpOutlined, DownOutlined, SearchOutlined, ReloadOutlined } from '@ant-design/icons';

export default function Query({ getList, setExtraParams, setPagination }) {
  const [queryExpand, toggleQueryExpand] = useState(false);
  const [form] = Form.useForm();

  const searchQuery = useCallback(
    e => {
      e.preventDefault();
      form.validateFields().then(values => {
        setExtraParams(values);
        setPagination(prev => ({ ...prev, current: 1 }));
        getList();
      });
    },
    [form, getList, setExtraParams, setPagination],
  );

  const searchReset = useCallback(
    e => {
      e.preventDefault();
      form.resetFields();
      setExtraParams(null);
      getList();
    },
    [form, getList, setExtraParams],
  );

  const handleToggleExpand = useCallback(() => {
    toggleQueryExpand(prev => !prev);
  }, []);

  return (
    <div>
      <Form form={form} autoComplete="off">
        <Row gutter={24}>
          <Col xl={6} lg={7} md={8} sm={24}>
            <Form.Item label="搜索" name="queryParam">
              <Input placeholder="请输入人员姓名/证件号" prefix={<SearchOutlined />} />
            </Form.Item>
          </Col>
          <Col xl={6} lg={7} md={8} sm={24}>
            <div>
              <Button type="primary" onClick={searchQuery} icon={<SearchOutlined />}>
                查询
              </Button>
              <Button onClick={searchReset} icon={<ReloadOutlined />} style={{ marginLeft: 8 }}>
                重置
              </Button>
              <a onClick={handleToggleExpand} style={{ marginLeft: 8 }}>
                {queryExpand ? (
                  <>
                    收起 <UpOutlined />
                  </>
                ) : (
                  <>
                    展开 <DownOutlined />
                  </>
                )}
              </a>
            </div>
          </Col>
        </Row>
      </Form>
    </div>
  );
}
